<template>
    <div class="listen-container">
        <ul class="listen-nav">
            <li :class="{'selected': curIndex==-1}" @click="checList(-1, null)">全部</li>
            <li v-for="(item, index) in microList" :key="index" :class="{'selected': curIndex==index}" @click="checList(index, item.id)">{{item.name}}</li>
        </ul>
        <div class="floor-list">
            <micro-box :circleList="floorList"></micro-box>
        </div>
        <router-link class="search-btn" to="/searchmicro" tag="div"></router-link>
    </div>
</template>
<script>
import microBox from './microBox.vue'
import market from '@/api/market.js'
export default {
    components: {
        microBox
    },
    data () {
        return {
            curIndex: -1,
            microList: [],
            curId: null,
            pageNum: 1,
            floorList: [],
            haveAll: true,
            myAgentId: this.$route.query.myAgentId
        }
    },
    created () {
        this.getBook()
        this.getList(this.curId, this.pageNum)
        if (this.myAgentId) {
            sessionStorage.myAgentId = this.myAgentId
        }
        window.onscroll = function () {
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
            var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
            if (scrollT >= scrollH - clientH && this.haveAll) {
                this.pageNum++
                this.getList(this.curId, this.pageNum)
            }
        }.bind(this)
    },
    methods: {
        getBook () {
            market.getMicroInfo(1).then(res => {
                if (res.code == 0) {
                    this.microList = res.result
                    this.changeId = res.result[0].id
                }
            })
        },
        checList(index, id) {
            this.curIndex = index
            this.curId = id
            this.pageNum = 1
            this.getList(this.curId, 1)
            this.floorList = []
        },
        getList (cur, pageNum) {
            market.selectListByQuery({
                catetory: cur,
                type: 1,
                orderBy: 1,
                page: pageNum,
                pagesize: 10,
                isFree: 1
            }).then(res => {
                if (res.code == 0) {
                    if (res.result) {
                        this.floorList = this.floorList.concat(res.result) 
                    } else {
                        this.haveAll = false
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .listen-container {
        .listen-nav {
            height: 0.7rem;
            font-size: 0.3rem;
            color: #707070;
            white-space: nowrap;
            overflow-x: scroll;
            padding-left: 0.3rem;
            border-bottom: 1px solid #ccc;
            li {
                display: inline-block;
                margin: 0 0.25rem;
                text-align: center;
                line-height: 0.7rem;
                height: 0.65rem;
            }
            .selected {
                color: #29abae;
                border-bottom: 3px solid #29abae;
            }
        }
        .search-btn {
            width: 1.02rem;
            height: 1.02rem;
            background: url(../../../assets/img/search-icon.png) no-repeat;
            background-size: 100%;
            position: fixed;
            bottom: 0.45rem;
            right: 0.45rem;
        }
    }
</style>
